<template>
  <div ref="chart" style="width: 100%; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';
import { EChartsOption } from 'echarts';
import { pcmApplicationDetailList } from "@/api/vendor/fig";

export default {
  data() {
    return {
      myChart: null,
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '需求数量',
            type: 'bar',
            barWidth: '60%',
            data: [
              // { value:'',itemStyle: {color: '#a90000'}},
              // { value:'',itemStyle: {color: '#55ff7f'}},
              // { value:'',itemStyle: {color: '#ffff7f'}},
              // { value:'',itemStyle: {color: '#ff5500'}},
              // { value:'',itemStyle: {color: '#00ffff'}},

            ]
          }
        ]
      },
      list: {},
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    this.myChart = echarts.init(this.$refs.chart);
    window.addEventListener('resize', this.handleResize);
  },
  methods: {
    getList() {
      pcmApplicationDetailList().then(response => {
        this.list = [...response.rows];
        const le = response.rows.length;
        for (let i = 0; i < le; i++) {
          this.option.xAxis[0].data.push(this.list[i].productName);
          this.option.series[0].data.push(this.list[i].requiredQuantity);
        }
        //console.log("科目:", this.option.xAxis[0].data);
        //console.log("总分:", this.option.series[0].data);
        this.renderChart(); // 在数据更新后重新渲染图表
      });
    },
    renderChart() {
      this.myChart.setOption(this.option);
    },
    handleResize() {
      this.myChart.resize();
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  }
};
</script>
